<!-- 新闻资讯列表页面 -->
<template>
  <s-layout title="新闻资讯" :bgStyle="{ color: '#FFF' }">
    <su-sticky bgColor="#fff">
      <su-tabs
        :list="state.category"
        :scrollable="false"
        @change="onTabsChange"
        :current="state.currentTab"
      />
    </su-sticky>
    
    <!-- 文章列表 -->
    <view class="news-list">
      <view 
        v-for="(article, index) in state.pagination.list" 
        :key="article.id"
        class="news-item"
        @click="goToDetail(article.id)"
      >
        <!-- 封面图 -->
        <view class="news-cover" v-if="article.cover">
          <image :src="article.cover" mode="aspectFill" />
        </view>
        
        <!-- 文章信息 -->
        <view class="news-info" :class="{ 'no-cover': !article.cover }">
          <view class="news-title">{{ article.title }}</view>
          <view class="news-summary">{{ article.summary }}</view>
          <view class="news-meta">
            <text class="news-time">{{ formatTime(article.publishTime) }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <uni-load-more 
      :status="state.loadStatus" 
      :content-text="loadText"
      @clickLoadMore="loadData"
    />
  </s-layout>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, reactive, computed } from 'vue';
  import DictApi from '@/sheep/api/system/dict';
  import NewsApi from '@/sheep/api/news/news';
  import { resetPagination } from '@/sheep/util';
 import { formatDate } from '@/sheep/helper/utils';

  const state = reactive({
    category: [],
    currentTab: 0,
    loadStatus: '',
    pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
    },
  });

  // 加载状态文本
  const loadText = computed(() => {
    return {
      contentdown: '上拉显示更多',
      contentrefresh: '正在加载...',
      contentnomore: '没有更多数据了'
    };
  });

  // 获取新闻分类集合
  async function getNewsCategoryList() {
    let { code, data } = await DictApi.getDictDataListByType('news_category');
    if (code !== 0) {
      return;
    }
    if (data && data.length > 0) {
      // 添加"全部"选项
      state.category = [
        { label: '全部', value: '' },
        ...data
      ];
    } else {
      state.category = [{ label: '全部', value: '' }];
    }
  }

  // 切换选项卡
  function onTabsChange(e) {
    if (state.currentTab === e.index) {
      return;
    }
    // 重新加载数据
    resetPagination(state.pagination);
    state.currentTab = e.index;
    getNewsList();
  }

  // 获取新闻列表
  async function getNewsList() {
    state.loadStatus = 'loading';
    
    const categoryId = state.category[state.currentTab]?.value || '';
    
    let { code, data } = await NewsApi.getNewsPage({
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize,
      categoryId: categoryId,
    });
    
    if (code !== 0) {
      state.loadStatus = 'noMore';
      return;
    }
    
    if (state.pagination.pageNo === 1) {
      state.pagination.list = data.list;
    } else {
      state.pagination.list = state.pagination.list.concat(data.list);
    }
    
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
  }

  // 加载更多数据
  function loadData() {
    if (state.loadStatus === 'loading') return;
    
    state.pagination.pageNo++;
    getNewsList();
  }

  // 格式化时间
  function formatTime(time) {
    return formatDate(time, 'yyyy-mm-dd hh:MM');
  }

  // 跳转到详情页
  function goToDetail(articleId) {
    uni.navigateTo({
      url: `/pages/index/news/detail/index?id=${articleId}`
    });
  }

  // 页面加载
  onLoad((options) => {
    getNewsCategoryList().then(() => {
      getNewsList();
    });
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    resetPagination(state.pagination);
    getNewsList().then(() => {
      uni.stopPullDownRefresh();
    });
  });

  // 上拉加载更多
  onReachBottom(() => {
    if (state.loadStatus === 'more') {
      loadData();
    }
  });
</script>

<style lang="scss" scoped>
.news-list {
  padding: 20rpx;
}

.news-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

.news-cover {
  width: 200rpx;
  height: 140rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 20rpx;
  flex-shrink: 0;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  &.no-cover {
    margin-left: 0;
  }
}

.news-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-summary {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-time {
  font-size: 24rpx;
  color: #999;
}

/* 分类标签样式 */
:deep(.su-tabs) {
  .su-tabs-item {
    font-size: 28rpx;
    padding: 20rpx 30rpx;
    
    &.active {
      color: #007aff;
      font-weight: 600;
    }
  }
}

/* 加载更多样式 */
:deep(.uni-load-more) {
  padding: 30rpx 0;
}
</style>

